<script setup>
import { getProductRecommendationApi } from '@/apis/user'
import { showToast } from 'vant';
import { ref } from 'vue';
const props = defineProps({
    overview_id: Number
})

const tuijianList = ref([])
const getRecommendation = async () => {
    const res = await getProductRecommendationApi(props.overview_id)
    if (res.data.code == 200) {
        let list = res.data.data.info.details
        tuijianList.value = []
        list.forEach((item, index) => {
            let colorby = ''
            switch (item.cr8c4_description) {
                case 'Degreasing':// 脱脂
                    colorby = '1'
                    break
                case 'Acid Pickling':// 酸洗
                    colorby = '2'
                    break
                case 'Thin Film':// 硅烷
                    colorby = '3'
                    break
                case 'Passivation':// 钝化
                    colorby = '3'
                    break
                case 'Phosphating':// 磷化
                    colorby = '4'
                    break
                case 'Saponification':// 皂化
                    colorby = '5'
                    break
                case 'Lubrication':// 润滑
                    colorby = '5'
                    break
                case 'Reactive Oil':// 拉拔油
                    colorby = '5'
                    break
                case 'VIANT':
                    colorby = '6'
                    break
                case 'Rinsing':// 水洗
                    colorby = '0'
                    break
                case 'Hot water cleaning':// 热水洗
                    colorby = '0'
                    break
                default:
                    colorby = '0'
                    break;
            }
            let info = {
                id: 's' + index + 1,
                name: item.cr8c4_description,
                proimg: new URL(`../../assets/img/color_${colorby}_1.png`, import.meta.url).href,
                jtshow: index < list.length - 1 ? true : false,
                params: item.params
            }
            tuijianList.value.push(info)
        })

    } else {
        showToast(res.data.msg)
    }
}
getRecommendation()

</script>

<template>
    <div class="protuijian clmstart">
        <div class="pitem" v-for="item in tuijianList" :key="item.id">
            <div class="piteminfo">
                <div class="itemstepbox clmcenter">
                    <p class="stepname">{{ item.name }}</p>
                    <div class="stepimgbox clmcenter">
                        <img :src="item.proimg" class="stepimg" />
                    </div>
                </div>
                <div class="tuijianbox">
                    <div class="titem" v-for="sitem in item.params" :key="sitem.new_productname">
                        <p>{{ sitem.new_productname }}</p>
                        <p><i>{{ sitem.new_concentration }}%</i>conc</p>
                    </div>
                </div>
            </div>
            <img src="@/assets/img/jt_down.png" class="jt_down" v-show="item.jtshow" />
        </div>
    </div>
</template>
<style lang="scss" scoped>
.protuijian {
    position: relative;
    width: 572px;
    margin: 50px auto -30px;
    font-family: 'Helvetica';
    .pitem {
        width: 100%;
        margin-bottom: 15px;
        text-align: left;
        font-size: 1.78rem;
        .piteminfo {
            display: flex;
            .itemstepbox {
                position: relative;
                width: 161px;
                height: 161px;
                background: url('@/assets/img/cxitembg.png') no-repeat;
                background-size: 100% 100%;
                .stepname {
                    font-weight: bold;
                    text-align: center;
                }
                .stepimgbox {
                    position: relative;
                    width: 130px;
                    margin-top: 20px;
                    .stepimg {
                        width: 100%;
                    }
                }
            }
            .tuijianbox {
                flex: 1;
                margin-left: 20px;
                display: flex;
                flex-flow: column nowrap;
                justify-content: center;
                align-items: flex-start;
                .titem {
                    width: 100%;
                    margin-bottom: 16px;
                    p {
                        color: #000000;
                        text-align: center;
                        line-height: 1.2;
                        font-weight: bold;
                        i {
                            font-style: normal;
                            font-size: 2.38rem;
                        }
                    }
                }
                .titem:last-child {
                    margin-bottom: 0;
                }
            }
        }
        .jt_down {
            margin-left: 70px;
        }
    }
}
</style>